// import './design_right.css'
// import ma from "../../assets/simg/ma.png"
// import React, { useState } from 'react';
// import type { InputNumberProps } from 'antd';
// import { Col, InputNumber, Row, Slider, Space } from 'antd';
// interface ShapeCroppingButtonProps {
//   // 如果需要添加其他属性，请在这里定义
// }
// const design_right:React.FC<ShapeCroppingButtonProps> = (props) => {
//   const [isTemplateVisible, setIsTemplateVisible] = useState(false);

//   const handleButtonClick = () => {
//     setIsTemplateVisible(!isTemplateVisible);
//   };

//   const [inputValue, setInputValue] = useState(1);

//   const onChange: InputNumberProps['onChange'] = (newValue) => {
//     setInputValue(newValue as number);
//   };

// const design_right:React.FC<{ isVisible: boolean }> = ({isVisible}) => {
//   return (
//     <div>
//       {/* 根据 isVisible 的值决定显示哪个盒子 */}
//       {isVisible ? <div className='design_right_right'>
//       <p className='down'>画布编辑</p>
//       <p>
//         <span>画布尺寸</span>
//         <span>编辑</span>
//       </p>
//       <p>
//         <button>
//             <span>900px</span>
//             <span>宽</span>
//         </button>
//           <button>
//             <span>900px</span>
//             <span>宽</span>
//         </button>
//       </p>
//       <p>画布颜色</p>
//       <p className='grey'>
//         <button className='white'></button>
//         <span>灰</span>
//       </p>
//       <p>画布背景</p>
//       <button className='up'>上传背景图片</button>
//       <br />
//       <span className='text'>
//        * 依据国家相关法律法规，禁止上传包含色情，违法，侵权等性质内容，违规内容将会删除处理
//       </span>
//       <span className='text'>
//         作品中字体仅作展示使用，如需商用，请另行购买或替换成开源字体
//       </span>
//       <img src={ma} alt="" className='ma'/>
//     </div>: }
//     </div>
//   )
// }

// export default design_right

import './design_right.css'
import ma from "../../assets/simg/ma.png"
import React, { useState } from 'react';
import type { InputNumberProps } from 'antd';
import { Col, InputNumber, Row, Slider, Space } from 'antd';
interface ShapeCroppingButtonProps {
  // 如果需要添加其他属性，请在这里定义
}
interface ContentComponentProps {
  showContent: boolean;
}
const design_right:React.FC<ContentComponentProps> = (props,showContent  ) => {
  const [isTemplateVisible, setIsTemplateVisible] = useState(false);
  const cuut=()=>{
    window.location.href='/home/cutout'
  }
  const handleButtonClick = () => {
    setIsTemplateVisible(!isTemplateVisible);
  };

  const [inputValue, setInputValue] = useState(1);

  const onChange: InputNumberProps['onChange'] = (newValue) => {
    setInputValue(newValue as number);
  };
   // 定义状态变量
    const [width, setWidth] = useState(900);
    const [height, setHeight] = useState(900);
    const [color, setColor] = useState('#FFFFFF'); // 默认白色
    const [backgroundImage, setBackgroundImage] = useState(null);

    // 处理画布尺寸更改
    const handleWidthChange = (newWidth) => {
        setWidth(newWidth);
    };

    const handleHeightChange = (newHeight) => {
        setHeight(newHeight);
    };

    // 处理颜色更改
    const handleColorChange = (newColor) => {
        setColor(newColor);
    };

    // 处理背景图片上传
    const handleBackgroundUpload = (event) => {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onloadend = () => {
                setBackgroundImage(reader.result);
            };
            reader.readAsDataURL(file);
        }
    };
  return (
    // <div>
    //   {isVisible ? }
    // </div>
    <div>
      {showContent  ?  <div className='design_right_right'>
            <div className="cssc">
                <p className='down'>画布编辑</p>
                <p>
                    <span>画布尺寸</span>
                    <span>编辑</span>
                </p>
                <p>
                    <button onClick={() => handleWidthChange(900)}>
                        <span>900px</span>
                        <span>宽</span>
                    </button>
                    <button onClick={() => handleHeightChange(900)}>
                        <span>900px</span>
                        <span>高</span>
                    </button>
                </p>
                <p>画布颜色</p>
                <p className='grey'>
                    <button 
                        className={`white ${color === '#FFFFFF' ? 'selected' : ''}`} 
                        onClick={() => handleColorChange('#FFFFFF')}
                    ></button>
                    <span>白</span>
                    {/* 可以添加更多颜色选项 */}
                </p>
                <p>画布背景</p>
                <button className='up' onClick={() => document.getElementById('upload').click()}>
                    上传背景图片
                </button>
                <input type="file" id="upload" style={{ display: 'none' }} onChange={handleBackgroundUpload} />
                <br />
                <span className='text'>
                    * 依据国家相关法律法规，禁止上传包含色情，违法，侵权等性质内容，违规内容将会删除处理
                </span>
                <span className='text'>
                    作品中字体仅作展示使用，如需商用，请另行购买或替换成开源字体
                </span>
                <img src={backgroundImage || ma} alt="" className='ma'/>
            </div>
        </div>: <div className='ccss'>
      <div className="edit">
        <p><b>图片编辑</b></p>
        <button>替换图片</button>
      </div>
      <div className="Cropping">
        <p>裁剪</p>
        <button>
            <img src="../src/assets/images/裁剪.png" alt="" />
            裁剪图片
        </button>
        <button style={{display:'flex'}} onClick={handleButtonClick}>
              {isTemplateVisible && (
            <div>
              {/* 在这里放置你的裁剪模板 */}
              {/* 示例： */}
              <div className="shape-template">
                {/* 数字0-9 */}
                <div className="shape shape-0">0</div>
                <div className="shape shape-1">1</div>
                <div className="shape shape-1">2</div>
                <div className="shape shape-1">3</div>
                <div className="shape shape-1">4</div>
                <div className="shape shape-1">5</div>
                <div className="shape shape-1">6</div>
                <div className="shape shape-1">7</div>
                <div className="shape shape-1">8</div>
                <div className="shape shape-9">9</div>

                {/* 其他形状 */}
                <div className="shape shape-circle">○</div>
                <div className="shape shape-square">□</div>
                <div className="shape shape-square">△</div>
                {/* ...省略... */}
                </div>
            </div>
          )}
            <div>
                <img src="../src/assets/images/禁止.png" alt="" />
            </div>
            <p>形状裁剪</p>
            <div className='san'>
              <img src="../src/assets/images/倒三角.png" alt="" />
            </div>
        </button>
      </div>
      <div className="overturn">
        <p>翻转</p>
        <button>
          <img src="../src/assets/images/水平对齐.png" alt="" />
          水平翻转
        </button>
        <button>
          <img src="../src/assets/images/垂直翻转.png" alt="" />
          垂直翻转
        </button>
      </div>
      <div className="transparent">
        <p>透明度</p>
        <div className='pcd' style={{display:'flex'}}>
          <b>不透明</b>
          <Row className='row'>
      <Col span={20}>
        <Slider className='row1'
          min={1}
          max={100}
          onChange={onChange}
          value={typeof inputValue === 'number' ? inputValue : 0}
        />
      </Col>
      <Col span={4}>
        <InputNumber
          min={1}
          max={100}
          style={{ margin: '0 16px' ,width:'60px'}}
          value={inputValue}
          onChange={onChange}
        />
      </Col>
    </Row>
        </div>
      </div>
      <div className="matting">
        <p>抠图</p>
        <p>
          <img src="../src/assets/images/kou.png" onClick={cuut} alt="" />
        </p>
      </div>
    </div>}
      
    
    </div>
  )
}

export default design_right
